import { Toast } from 'antd-mobile';
import Axios from 'axios';
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import style from './sign.module.scss'
class signUp extends Component {
    state = {
        user: '',
        pass: '',
        text: 'FUCKYOU',
        userText: '',
        sendCode: '',
        passTwo: '',
        isSend: false,
        num: 60
    }
    // 手机号
    userChange = (e) => {
        this.setState({ user: e.target.value })
    }
    // 密码
    passChange = (e) => {
        this.setState({ pass: e.target.value })
    }
    // 再次输入密码
    passTwoChange = (e) => {
        this.setState({ passTwo: e.target.value })
    }
    // 验证码
    userChangeText = (e) => {
        this.setState({ userText: e.target.value })
    }
    // 校验码
    codeChange = (e) => {
        this.setState({ sendCode: e.target.value })
    }
    // 换一张验证码
    textChange = () => {
        let str = 'QWERTYUIOPASDFGHJKLZXCVBNM0123456789'
        let newStr = ''
        for (var i = 0; i < 7; i++) {
            var ran = Math.floor(Math.random() * str.length)
            newStr += str[ran]
        }
        this.setState({ text: newStr })
    }
    // 获取验证码
    send = () => {
        this.setState({ isSend: true })
        let num = this.state.num
        this.setState({ num: num + '秒后重新发送' })
        let time = setInterval(() => {
            num--
            this.setState({ num: num + '秒后重新发送' })
            if (num <= 0) {
                clearInterval(time)
                this.setState({ isSend: false })
            }
        }, 1000);
        if (this.state.user === '') {
            Toast.info('请输入手机号', 1)
        } else {
            // 告诉后端
            Axios.post('http://s.linweiqin.com/api/s/getMobileCode', { mobile: this.state.user }).then(res => {
                Toast.info('正在发送...', 1, () => {
                    Toast.info(res.data.msg, 1)
                })
                console.log(res) // 待续
            })
        }
    }
    // 确认注册
    login = () => {
        // 任何一项都不能为空
        if (this.state.user === '' || this.state.pass === '' || this.state.userText === '' || this.state.passTwo === '' || this.state.sendCode === '') {
            Toast.info('输入内容不能为空！', 1)
        } else {
            // 判断本地验证是否正确
            if (this.state.userText !== this.state.text) {
                Toast.info('验证码不正确', 1)
            } else {
                // 两次密码是否正确
                if (this.state.pass !== this.state.passTwo) {
                    Toast.info('两次密码不一致', 1)
                } else {
                    // 以上都正确了，就告诉后端，这个人要注册
                    Axios.post('http://s.linweiqin.com/api/s/createUser', {
                        mobile: this.state.user,
                        username: this.state.user,
                        password: this.state.pass,
                        code: this.state.sendCode
                    }).then(res => {
                        Toast.info(res.data.msg, 1) // 注册 待续
                        console.log(res)
                        setTimeout(() => {
                            this.props.history.push('/login')
                        }, 2000);
                    })
                }

            }
        }
    }
    render() {
        return (
            <div className={style.wrap}>
                {/* 脑袋 */}
                <div className={style.header}>
                    <span onClick={() => { this.props.history.push('/login') }}>{'<'}</span>
                    <h2>用户登录</h2>
                    <b></b>
                </div>
                {/* 手机号 */}
                <p><input type="text" placeholder='手机号' value={this.state.user} onChange={this.userChange} /></p>
                {/* 验证码 */}
                <p>
                    <span>{this.state.text}</span>
                    <em onClick={this.textChange}>换一张</em>
                </p>
                <p><input type="text" placeholder='请输入验证码' value={this.state.userText} onChange={this.userChangeText} /></p>
                {/* 手机验证码 */}
                <p className={style.code}>
                    <input type="text" value={this.state.sendCode} onChange={this.codeChange} placeholder='请输入校验码' />
                    <em onClick={this.send}>{this.state.isSend ? this.state.num : '获取验证码'}</em>
                </p>
                {/* 密码 */}
                <p><input type="text" value={this.state.pass} placeholder='请输入密码' onChange={this.passChange} /></p>
                <p><input type="text" value={this.state.passTwo} placeholder='请再次输入密码' onChange={this.passTwoChange} /></p>
                <p className={style.login} onClick={this.login}>确认注册</p>
            </div>
        );
    }
}

export default withRouter(signUp);









